<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>YanLingJi</title>
	</head>
	<style>
		:root {
			--borderColor: rgb(226, 198, 54);
		}

		* {
			margin: 0;
			padding: 0;
		}

		.wrapper {
			width: 100vw;
			height: 100vh;
			background: url("./bg.jpg") center no-repeat;
			background-size: cover;
			position: relative;
		}

		.shade {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.6);
			position: absolute;
			left: 0;
			top: 0;
		}

		.center-circle {
			width: 400px;
			height: 400px;
			background: url("./bg.jpg") center no-repeat;
			background-size: cover;
			border: 2px solid var(--borderColor);
			border-radius: 50%;
			box-sizing: border-box;
			z-index: 2;

			position: absolute;
			left: 50%;
			top: 50%;
			animation: centerCircleRotate 20s linear backwards infinite;
		}

		@keyframes centerCircleRotate {
			0% {
				transform: translate(-50%, -50%) rotate(0);
			}

			100% {
				transform: translate(-50%, -50%) rotate(360deg);
			}
		}

		.circle-border {
			width: 400px;
			height: 400px;
			border-radius: 100%;
			border: 2px solid var(--borderColor);
			box-sizing: border-box;
			z-index: 1;

			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.circle-border:nth-of-type(3) {
			animation: circleBorderMove 2s ease-in backwards infinite;
		}

		.circle-border:nth-of-type(4) {
			animation: circleBorderMove 2s 1s ease-in backwards infinite;
		}

		@keyframes circleBorderMove {
			0% {
				transform: translate(-50%, -50%) scale(1.0);
				border: 2px solid var(--borderColor);
			}

			100% {
				transform: translate(-50%, -50%) scale(1.2);
				border: 2px solid rgba(0, 0, 0, 0);
			}
		}

		.bubble {
			width: 20px;
			height: 20px;
			background: var(--borderColor);
			border-radius: 50%;
			z-index: 0;

			position: absolute;
			left: 50%;
			top: 50%;
		}

		.bubble:nth-of-type(1) {
			transform: translate(7rem, 7rem);
			animation: bubbleMove1 4s linear infinite;
		}

		@keyframes bubbleMove1 {
			0% {
				transform: translate(7rem, 7rem) scale(1);
				opacity: 1;
			}

			50% {
				opacity: 1;
			}

			100% {
				transform: translate(15rem, 15rem) scale(0);
				opacity: 0;
			}
		}

		.bubble:nth-of-type(2) {
			animation: bubbleMove2 5s ease infinite;
		}

		@keyframes bubbleMove2 {
			0% {
				transform: translate(-7rem, 7rem) scale(1);
				opacity: 1;
			}

			50% {
				opacity: 1;
			}

			100% {
				transform: translate(-14rem, 15rem) scale(0);
				opacity: 0;
			}
		}

		.bubble:nth-of-type(3) {
			animation: bubbleMove3 5s ease-in infinite;
		}

		@keyframes bubbleMove3 {
			0% {
				transform: translate(7rem, -7rem) scale(1);
				opacity: 1;
			}

			50% {
				opacity: 1;
			}

			100% {
				transform: translate(16rem, -7rem) scale(0);
				opacity: 0;
			}
		}

		.bubble:nth-of-type(4) {
			animation: bubbleMove4 5s ease-out infinite;
		}

		@keyframes bubbleMove4 {
			0% {
				transform: translate(-7rem, -7rem) scale(1);
				opacity: 1;
			}

			50% {
				opacity: 1;
			}

			100% {
				transform: translate(-16rem, -18rem) scale(0);
				opacity: 0;
			}
		}

		.bubble:nth-of-type(5) {
			animation: bubbleMove5 4s linear infinite;
		}

		@keyframes bubbleMove5 {
			0% {
				transform: translate(-10rem, 0rem) scale(1);
				opacity: 1;
			}

			50% {
				opacity: 1;
			}

			100% {
				transform: translate(-16rem, 6rem) scale(0);
				opacity: 0;
			}
		}

		.bubble:nth-of-type(6) {
			animation: bubbleMove6 4.5s linear infinite;
		}

		@keyframes bubbleMove6 {
			0% {
				transform: translate(0rem, -10rem) scale(1);
				opacity: 1;
			}

			50% {
				opacity: 1;
			}

			100% {
				transform: translate(-18rem, -5rem) scale(0);
				opacity: 0;
			}
		}

		.bubble:nth-of-type(7) {
			animation: bubbleMove7 3s ease-in-out infinite;
		}

		@keyframes bubbleMove7 {
			0% {
				transform: translate(0rem, 10rem) scale(1);
				opacity: 1;
			}

			50% {
				opacity: 1;
			}

			100% {
				transform: translate(-2rem, 18rem) scale(0);
				opacity: 0;
			}
		}

		.bubble:nth-of-type(8) {
			animation: bubbleMove8 2.5s linear infinite;
		}

		@keyframes bubbleMove8 {
			0% {
				transform: translate(10rem, 0rem) scale(1);
				opacity: 1;
			}

			50% {
				opacity: 1;
			}

			100% {
				transform: translate(10rem, -15rem) scale(0);
				opacity: 0;
			}
		}
	</style>
	<body>

		<div class="wrapper">

			<div class="shade"></div>

			<div class="center-circle"></div>

			<div class="circle-border"></div>
			<div class="circle-border"></div>

			<span class="bubble"></span>
			<span class="bubble"></span>
			<span class="bubble"></span>
			<span class="bubble"></span>
			<span class="bubble"></span>
			<span class="bubble"></span>
			<span class="bubble"></span>
			<span class="bubble"></span>

		</div>

	</body>
</html>
